<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./bootstrap.min.css">
  <style>
    .container{
      margin-top: 100px;
    }
  </style>
</head>
<body>
  <div id="app">
    <div class="container">
      <table class="table table-bordered">
        <thead>
          <tr>
            <th>汽车品牌</th>
            <th>创建时间</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item,i) in list" :key="i">
            <td>{{item.brand}}</td>
            <td>{{item.time}}</td>
            <td><a href="#" @click.prevent="delBrand(i)">删除</a></td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  <script src="./vue.js"></script>
  <script>
    const vm = new Vue({
      el: '#app',
      data: {
        list: [
          {brand: '宝马', time: '2011-10-10'},
          {brand: '奥迪', time: '2015-10-10'},
          {brand: '奔驰', time: '2010-10-10'},
          {brand: '宝骏', time: '2000-10-10'}
        ]
      },
      methods: {
        delBrand (index) {
          // 删除当前行（以前直接操作dom,现在操作去数据）
          // 删除当前行对应数据，根据索引找到对应的数据，进行删除即可
          // console.log(index)
          // 删除 list 中 index 索引对应的数据
          this.list.splice(index, 1)
        }
      }
    })
  </script>
</body>
</html>